<template>
    <a-modal
            title="添加用户"
            :visible="visible"
            :closable="false"
            width="617px"
    >
        <div slot="footer" class="addUser-footer">
            <a-button key="back" @click="handleCancel">
                取消
            </a-button>
            <a-button key="submit" type="primary"
                      :loading="confirmLoading"
                      @click="handleSubmit">
                确认
            </a-button>
        </div>
        <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <p class="form-title">
                基本信息
            </p>
            <a-row :gutter="16">
                <a-col class="gutter-row" :span="12">
                    <a-form-item label="姓名">
                        <a-input
                                v-decorator="['name', { rules: [{ required: true, message: '请输入姓名!' }] }]"
                        />
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                    <a-form-item label="性别">
                        <a-select  v-decorator="['gender', { rules: [{ required: true, message: '请选择性别!' }] }]"
                                   >
                            <a-select-option value="jack">
                                男
                            </a-select-option>
                            <a-select-option value="lucy">
                                女
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                    <a-form-item label="电话">
                        <a-input
                                v-decorator="['phone', { rules: [{ required: true, message: '请输入电话!' }, {validator:phoneCheck.bind(this)}] }]"
                        />
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                    <a-form-item label="出生日期">
                        <a-date-picker style="width: 100%;"
                                       v-decorator="['dateBirth', { rules: [{ required: true, message: '请选择出生日期!' }] }]"
                        />
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                    <a-form-item label="设备IMEI">
                        <a-input
                                v-decorator="['imei', { rules: [] }]"
                        />
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                    <a-form-item label="所属机构">
                        <a-tree-select
                                v-decorator="['institutions', { rules: [{ required: true, message: '请选择所属机构!' }] }]"
                                style="width: 100%"
                                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                tree-default-expand-all
                        >
                            <a-tree-select-node key="0-1" value="parent 1" title="机构1">
                                <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
                                    <a-tree-select-node key="random" :selectable="false" value="leaf1" title="机构11" />
                                    <a-tree-select-node key="random1" value="leaf2" title="机构12" />
                                </a-tree-select-node>
                                <a-tree-select-node key="random2" value="parent 1-1" title="机构2">
                                </a-tree-select-node>
                            </a-tree-select-node>
                        </a-tree-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <hr style="height:1px;border:none;border-top:1px dashed #cccccc;">
            <p class="form-title">
                紧急联系人
                <a-button type="link" :disabled="contactNum.length >= 5" @click="contactNum.push({})">
                    <a-icon type="plus-circle" />
                    添加联系人
                </a-button>
            </p>
            <a-row :gutter="16" class="form-none-m">
                <template v-for="(item, key) in contactNum">
                    <a-col class="gutter-row" :key="'name' + key" :span="11">
                        <span class="gutter-row-del" v-if="key >= 3" @click="contactNum.splice(key, 1)">
                            <a-icon type="close-circle" />
                        </span>
                        <a-form-item label="姓名">
                            <a-input
                                    v-decorator="[`'contact[${key}].name`, { rules: [] }]"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col class="gutter-row" :key="'phone' + key" :span="11">
                        <a-form-item label="电话">
                            <a-input
                                    v-decorator="[`'contact[${key}].phone`, { rules: [] }]"
                            />
                        </a-form-item>
                    </a-col>
                </template>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script>
    import {phoneCheck} from "../../../utils/rules";

    export default {
        name: "addUserModel",
        data() {
            return {
                phoneCheck,
                visible: false,
                confirmLoading: false,
                form: this.$form.createForm(this, {}),
                contactNum: [{},{},{}],
            }
        },
        methods: {
            show() {
                this.visible = true;
            },
            handleCancel() {
                this.visible = false;
                this.form.resetFields()
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err) => {
                    if (!err) {
                        this.confirmLoading = true;
                        setTimeout(() => {
                            this.confirmLoading = false;
                            this.$message.success('添加成功');
                            this.handleCancel();
                                // this.$message.error('This is an error message');
                                // this.$message.warning('This is a warning message');
                        }, 1000)
                    }
                });
            },
        }
    }
</script>

<style scoped lang="less">
    .addUser-footer {
        text-align: center;
    }
    .form-none-m .ant-form-item{
        margin-bottom: 10px;
    }
    .ant-form-explain{
        margin-bottom: -2px;
    }
    .form-title{
        color: rgba(42, 130, 228, 1);
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        button{
            padding: 0;
            padding-right: 0;
            margin: 0;
        }
    }
    .gutter-row{
        position: relative;
        &-del{
            position: absolute;
            color: #999999;
            z-index: 2;
            cursor: pointer;
            top: 8px;
            left: 15px;
            margin: auto;
            transition: all .3s linear;
            &:hover{
                color: #1890ff!important;
            }
        }
    }
    .gutter-row > .ant-form-item{
        margin-bottom: 4px!important;
    }
</style>
